import React from 'react';
import SearchForm from '../../../../components/searchForm';
import TableComponent from '../../../../components/tableComponent';
import SetData from '../../../../components/setData';
import type { FormProps } from 'antd';
import type { TableProps } from 'antd';
import { Button, Form, Input, Table, Tag, Space } from 'antd';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import dataMockSource from './tableMockData.json'

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

interface DataType {
  name: string;
  distance: string;
  access: string;
  diagnose: string;
  tags: string[];
};

const columns: TableProps<DataType>['columns'] = [
  {
    title: '工程名称',
    dataIndex: 'name',
    key: '1',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '项目里程',
    dataIndex: 'distance',
    key: '2',
  },
  {
    title: '预警总数',
    dataIndex: 'access',
    key: '3',
  },
  {
    title: '诊断次数',
    dataIndex: 'diagnose',
    key: '4',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: '操作',
    key: 'action',
    width: '15%',
    render: () => (
      <Space size="middle">
        <a>查看</a>
        <a>编辑</a>
        <a>删除</a>
      </Space>
    ),
  },
];

const dataSource: DataType[] = dataMockSource;

const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
  console.log('Success:', values);
};

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

const BigDataStatisticalAnalysis: React.FC = () => {
    return (
        <>
            <SetData title='大数据统计分析展示详情'>
                <div>当前展示编号：CZTL00001</div>
            </SetData>
            <SearchForm title='大数据统计分析查询' style={{ margin: '10px 0 0 0' }}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ width: '100%' }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr'  }}>
                        <Form.Item<FieldType>
                            label="工程名称"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="项目里程"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="创建时间"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="预警总数"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="诊断次数"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item label={null} style={{ justifySelf: 'end', transform: 'translate(-64px)' }}>
                            <div style={{ display: 'flex' }}>
                                <Button 
                                    type="primary" 
                                    htmlType="submit" 
                                    style={{ marginLeft: '10px' }}
                                    icon={<SearchOutlined />}
                                >
                                    查 询
                                </Button>
                                <Button 
                                    htmlType="submit" 
                                    style={{ marginLeft: '10px' }} 
                                    icon={<RedoOutlined />}
                                >
                                    重 置
                                </Button>
                            </div>
                        </Form.Item>
                    </div>
                </Form>
            </SearchForm>
            <TableComponent 
                title='大数据统计分析列表'
                exportData={() => alert('导出')} 
                importData={() => alert('导入')}
                newAdd={() => alert('新增')}
            >
                <Table 
                    columns={ columns } 
                    dataSource={ dataSource } 
                    scroll={{ scrollToFirstRowOnChange: false }} />
            </TableComponent>
        </>
    );
};

export default BigDataStatisticalAnalysis;